//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

/* ==========================================================================
   Inputs

   The form-control class style all inputs
========================================================================== */

.form-control {
    flex: 1;
    display: flex;
    min-width: 50px;
    height: $form-input-height;
    padding: $form-input-padding-y $form-input-padding-x;
    color: $form-input-color;
    border: 1px solid $form-input-border-color;
    border-radius: $form-input-border-radius;
    background-color: $form-input-bg;
    background-image: none;
    box-shadow: none;
    font-size: $form-input-font-size;
    line-height: $form-input-line-height;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    @if $form-input-style==lined {
        @extend .form-control-lined;
    }
}

.form-control:focus {
    border-color: $form-input-border-focus-color;
    outline: 0;
    background-color: $form-input-bg-focus;
    box-shadow: none;
}

// Lined
.form-control-lined {
    border: 0;
    border-bottom: 1px solid $form-input-border-color;
    border-radius: 0;
    background-color: transparent;
    &:focus {
        background-color: transparent;
    }
}

// Read only form control class
.form-control-static {
    flex: 1;
    overflow: hidden;
    min-height: auto;
    padding: $form-input-padding-y $form-input-padding-x;
    border-bottom: 1px solid $form-input-static-border-color;
    font-size: $form-input-font-size;
    line-height: $form-input-line-height;

    & + .control-label {
        margin-left: $form-label-gutter;
    }
}

// Dropdown input widget
select.form-control {
    $arrow: "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15px' height='8px'><polyline id='Line' fill='none' stroke='%23555555' points='0.5 0.5 6 6 11.545361 0.5'></polyline></svg>";
    padding-left: 30px;
    padding-right: 30px;
    background-image: url($arrow);
    background-repeat: no-repeat;
    background-position: calc(100% - #{$form-input-padding-x}) center;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}

// Not editable textarea, textarea will be rendered as a label
.mx-textarea .control-label {
    height: auto;
}

textarea.form-control {
    height: auto;
}

.mx-compound-control {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;

    .mx-validation-message {
        flex-basis: 100%;
        margin-top: 5px;
    }
}

// Form Group
.form-group {
    display: flex;
    flex-direction: row;
    margin-bottom: $form-group-margin-bottom;

    & > div[class*='col-'] {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }
    & > [class*='col-'] {
        padding-right: $form-group-gutter;
        padding-left: $form-group-gutter;
    }
    // Alignment content
    div[class*='textBox'] > .control-label,
    div[class*='textArea'] > .control-label,
    div[class*='datePicker'] > .control-label {
        @extend .form-control-static;
    }
    // Label
    .control-label {
        color: $form-label-color;
        font-size: $form-label-size;
        font-weight: $form-label-weight;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 5px;
    }
    .mx-validation-message {
        flex-basis: 100%;
    }

    &.no-columns:not(.label-after) {
        flex-direction: column;
    }
}

.form-group.label-after {
    .form-control-static {
        flex: unset;
    }
    .control-label {
        margin-bottom: 0;
    }
}

.mx-dateinput,
.mx-referenceselector,
.mx-referencesetselector {
    flex: 1;
}

// Targets only webkit iOS devices
.dj_webkit.dj_ios .form-control {
    transform: translateZ(0);
}

@media only screen and (min-width: $screen-sm) {
    .form-horizontal {
        .control-label {
            padding-top: $form-input-padding-y;
            padding-bottom: $form-input-padding-y;
            line-height: $form-input-line-height;
            margin-bottom: 0;
        }
    }
}

@media only screen and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 0) {
    // Fixes alignment bug on iPads / iPhones where datefield is not aligned vertically
    input[type='date'],
    input[type='time'],
    input[type='datetime-local'],
    input[type='month'] {
        line-height: 1;
    }

    // Fix shrinking of date inputs because inability of setting a placeholder
    input[type='time']:not(.has-value):before,
    input[type='date']:not(.has-value):before,
    input[type='month']:not(.has-value):before,
    input[type='datetime-local']:not(.has-value):before {
        content: attr(placeholder) !important;
        color: #aaa;
        margin-right: 0.5em;
    }
    input[type='time'].has-value:before,
    input[type='date'].has-value:before,
    input[type='month'].has-value:before,
    input[type='datetime-local'].has-value:before {
        content: '' !important;
    }
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
    // Target IE10+
    .form-group {
        display: block;
    }
}

[dir='rtl'] {
    // Dropdown input widget
    select.form-control {
        padding-right: 30px;
        padding-left: 30px;
        background-position: #{$form-input-padding-x} center;
    }
}
